<template>
    <div class="wrapper">
        <div class="titel-row">
            <div class="home-icon">
                <img src="../../assets/inquiryRegister/home.png" alt>
            </div>
            <div class="title">受理登记</div>
        </div>
        <div class="content">
            <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig" />
            <div class="table-wrapper">
                <el-table v-on:cell-click="onClickRow" :row-class-name="tableRowClassName" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" row-key="id">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column :formatter="item.formatter" v-for="(item,index) in thConfig" :key="index" v-bind:prop="item.prop" v-bind:label="item.label"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-tooltip content="查看" placement="top">
                                <el-button v-on:click.stop.prevent="onDetail(scope.row)" icon="el-icon-search" size="small" circle />
                            </el-tooltip>
                            <el-tooltip content="编辑" placement="top">
                                <el-button v-if="scope.row.handleType == '1'" v-on:click.stop.prevent="onEdit(scope.row)" type="primary" icon="el-icon-edit-outline" size="small" circle />
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <Popover title="确定删除吗？" @onConfirm="deleteHandler(scope.row)">
                                    <el-button v-if="scope.row.handleType == '1'" v-on:click.stop.prevent="onDelete" style="margin-left: 10px" type="danger" icon="el-icon-delete" size="small" circle />
                                </Popover>
                            </el-tooltip>
                            <el-tooltip content="驳回" placement="top">
                                <el-button style="margin-left: 10px" v-on:click.stop.prevent="rejectHandler(scope.row)" size="small" circle>
                                    <img style="width:12px" src="../../assets/inquiryRegister/reject.png">
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="handle-row">
                    <button v-on:click="openModal(item.type,{isCreate:true,item})" class="handle-btn" v-bind:class="[item.color]" v-for="(item,index) in buttonConfig" :key="index" :disabled="item.type=='dispatch'&&(multipleSelection&&multipleSelection.length==0)">
                        <img :src="item.icon" alt>
                        <span>{{item.name}}</span>
                    </button>
                </div>
            </div>
            <div class="pager">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listRequest.pageNum" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>
        <RegisterDialog :disabledWindow="true" title="受理登记" v-on:onSubmit="onSubmit" />
        <ViewDetail width="800px" :dialogVisible="detailVisible" @onClose="detailVisible=false" :list="detailData" :columns="detailColumns" />
        <RejectDialog :dialogVisible="rejectVisible" @onClose="rejectVisible=false" @callBack="rejectcallBack" :record="rejectItem" />
    </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import RegisterDialog from "../../components/common/registerDialog.vue"; //预审登记弹窗

import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import RejectDialog from "../../components/slRecord/rejectDialog.vue"; //驳回弹窗
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils";

const addIcon = require("../../assets/inquiryRegister/add.png");
const editIcon = require("../../assets/inquiryRegister/edit.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const dispatchIcon = require("../../assets/inquiryRegister/dispatch.png");
const rejectIcon = require("../../assets/inquiryRegister/reject.png");
import {
    getBusinessHandle,
    deletePretrial,
    findByDictCode,
    addYwHandle,
    editYwHandle,
    getSlDetailById,
    businessAccept
} from "../../config/api.js";
export default {
    components: {
        SearchHeader,
        RegisterDialog,
        Popover,
        ViewDetail,
        RejectDialog
    },
    data() {
        return {
            listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
            detailVisible: false, //详情窗口显示隐藏
            rejectVisible: false, //驳回窗口显示隐藏
            detailData: {}, //详情数据
            rejectItem: {}, //驳回项的数据
            areaCode: [], //数据字典返回值--区域
            multipleSelection: [], //选中的项
            total: 0, //共多少条
            thConfig: [
                { prop: "applyPersonName", label: "申请单位/人" },
                // { prop: "applyPersonAddress", label: "地址" },
                { prop: "handleInfoName", label: "办理事项" },
                { prop: "areaCodeName", label: "所属区域" },
                { prop: "handlePersonName", label: "经办人" },
                { prop: "handlePersonTelNo", label: "联系电话" },
                {
                    prop: "handleTypeName",
                    label: "受理类型",
                    formatter: function(row) {
                        if (row.handleTypeName === "统一受理") {
                            return (
                                <span style={{ color: "#00a01e" }}>
                                    {row.handleTypeName}
                                </span>
                            );
                        }
                        return row.handleTypeName;
                    }
                },
                {
                    prop: "getTypeName",
                    label: "取证方式",
                    formatter: function(row) {
                        if (row.getTypeName === "到付邮寄") {
                            return (
                                <span style={{ color: "#00a01e" }}>
                                    {row.getTypeName}
                                </span>
                            );
                        }
                        return row.getTypeName;
                    }
                }
            ], //table头部配置
            tableData: [],
            buttonConfig: [
                {
                    name: "新增",
                    icon: addIcon,
                    type: "showRegisterDialog",
                    color: "main"
                },
                {
                    name: "受理",
                    icon: dispatchIcon,
                    type: "dispatch",
                    color: "green"
                }
                // {name:"修改",icon:editIcon,type:"edit",color:"green"},
                // {name:"删除",icon:deleteIcon,type:"delete",color:"default"},
                // {name:"驳回",icon:rejectIcon,type:"reject",color:"default"},
            ],
            searchConfig: [
                //搜索栏配置
                {
                    label: "申请单位/人",
                    code: "keyword",
                    type: "search",
                    value: ""
                },
                // {
                //     label: "办理事项",
                //     code: "handleInfo",
                //     type: "select",
                //     value: "",
                //     data: [
                //         { name: "全部", value: ""},
                //     ]
                // },
                {
                    label: "受理类型",
                    code: "handleType",
                    type: "radio",
                    value: "",
                    data: [
                        { name: "全部", value: "", active: true },
                        { name: "现场受理", value: "1", active: false },
                        { name: "统一受理", value: "0", active: false }
                    ]
                },
                {
                    label: "所属区域",
                    code: "areaCode",
                    type: "radio",
                    value: "",
                    data: [{ name: "全部", value: "", active: true }],
                    delectVisible: false
                }
            ],
            detailColumns: [
                {
                    title: "办理事项",
                    dataIndex: "handleInfoName"
                },
                {
                    title: "操作",
                    dataIndex: "statusName"
                },

                {
                    title: "归属窗口",
                    dataIndex: "windowNum"
                },
                {
                    title: "所属区域",
                    dataIndex: "areaCodeName"
                },
                {
                    title: "经办人姓名",
                    dataIndex: "handlePersonName"
                },
                {
                    title: "取件方式",
                    dataIndex: "getTypeName"
                },

                {
                    title: "经办人联系方式",
                    dataIndex: "handlePersonTelNo"
                },
                {
                    title: "申请人",
                    dataIndex: "applyPersonName"
                },
                // {
                //     title: "邮寄地址",
                //     dataIndex: "applyPersonAddress"
                // },
                {
                    title: "经办人证件类型",
                    dataIndex: "handlePersonCardTypeName"
                },
                {
                    title: "申请人证件类型",
                    dataIndex: "applyPersonCardTypeName"
                },
                {
                    title: "经办人证件号码",
                    dataIndex: "handlePersonCardNum"
                },
                {
                    title: "申请人证件号码",
                    dataIndex: "applyPersonCardNum"
                },
                {
                    title: "经办人证件有效期",
                    dataIndex: "handlePersonTime",
                    render: row => {
                        if (!row.handlePersonStartTime) {
                            return "无";
                        }
                        let startTime = getTimeStr(
                            row.handlePersonStartTime,
                            "yyyy-MM-dd"
                        );
                        let endTime = getTimeStr(
                            row.handlePersonEndTime,
                            "yyyy-MM-dd"
                        );
                        return `${startTime} 至 ${endTime}`;
                    }
                },
                {
                    title: "申请证件有效期",
                    dataIndex: "applyPersonTime",
                    render: row => {
                        if (!row.applyPersonStartTime) {
                            return "无";
                        }
                        let startTime = getTimeStr(
                            row.applyPersonStartTime,
                            "yyyy-MM-dd"
                        );
                        let endTime = getTimeStr(
                            row.applyPersonEndTime,
                            "yyyy-MM-dd"
                        );
                        return `${startTime} 至 ${endTime}`;
                    }
                },
                {
                    title: "经办人证件附件",
                    dataIndex: "handlePersonFilePath",
                    type: "img"
                },
                {
                    title: "申请人证件附件",
                    dataIndex: "applyPersonFilePath",
                    type: "img"
                },

                {
                    title: "驳回原因",
                    dataIndex: "opinion"
                },
                {
                    title: "备注",
                    dataIndex: "remark"
                }
            ]
        };
    },
    methods: {
        /**
         * 点击table row
         */
        onClickRow(row) {
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        //删除，不需要任何事件，只为处理事件冒泡。
        onDelete() {},
        //新增确定按钮回调函数
        onSubmit(request) {
            if (this.handleType === "add") {
                addYwHandle(request).then(() => {
                    this.$message({
                        message: "新增成功",
                        type: "success"
                    });
                    this.getList();
                    Pubsub.publish("hideRegisterDialog");
                });
            } else {
                request.id = this.currentRow.id;
                editYwHandle(request).then(() => {
                    this.$message({
                        message: "编辑成功",
                        type: "success"
                    });
                    this.getList();
                    Pubsub.publish("hideRegisterDialog");
                });
            }
        },
        /**
         * 编辑
         */
        onEdit(e) {
            this.handleType = "edit";
            this.currentRow = e;
            Pubsub.publish("showRegisterDialog", {
                type: "tysl",
                handleType: "add"
            });
            getSlDetailById({
                id: e.id,
                handlePersonId: e.handlePersonId,
                applyPersonId: e.applyPersonId
            }).then((result = {}) => {
                let detail = result.data || {};
                Pubsub.publish("refreshDialogData", detail);
            });
        },
        /**
         * 搜索栏回调
         */
        onSearchCallback(re = {}) {
            let request = Object.assign(this.listRequest, re);
            this.listRequest = request;
            this.getList();
        },
        /**
         * 设置table某一项class
         */
        tableRowClassName({ row, rowIndex }) {
            // if (rowIndex === 2) {
            //   return "warning-row";
            // }
            if (rowIndex % 2 === 0) {
                return "even-row";
            } else {
                return "odd-row";
            }
        },
        /**
         * 设置选中项
         */
        handleSelectionChange(e = []) {
            if (e.length) {
                e.map(item => {
                    this.multipleSelection.push(item.id);
                });
            } else {
                this.multipleSelection = [];
            }
        },
        /**
         * 查看详情
         */
        onDetail(e) {
            getSlDetailById({
                id: e.id,
                handlePersonId: e.handlePersonId,
                applyPersonId: e.applyPersonId
            }).then((result = {}) => {
                this.detailData = result.data || {}; //传参
            });
            this.detailVisible = true;
            //
        },
        /**
         * 删除
         */
        deleteHandler(e) {
            deletePretrial({ id: e.id }).then((res = {}) => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                this.getList();
            });
        },
        /**
         * 驳回
         */
        rejectHandler(e) {
            this.rejectItem = e;
            this.rejectVisible = true;
        },
        /**
         * 驳回-回调
         */
        rejectcallBack(e) {
            this.rejectVisible = false;
            this.getList();
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.listRequest.pageNum = val;
            this.getList();
        },
        /**
         * 操作按钮点击事件
         */
        openModal(type, values) {
            if (type == "dispatch") {
                this.dispatch(values);
                return;
            } else {
                this.handleType = "add"; //新增
            }
            Pubsub.publish(type, { type: "ywsl", handleType: "add" });
        },
        getList() {
            getBusinessHandle(this.listRequest).then((res = {}) => {
                this.tableData = res.rows;
                this.total = res.total || 0;
            });
        },
        dispatch(values) {
            this.$confirm("请确认是否受理?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    businessAccept({ ids: this.multipleSelection }).then(
                        (res = {}) => {
                            this.$message({
                                type: "success",
                                message: "受理成功!"
                            });
                            this.multipleSelection = [];
                            this.getList();
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        /**
         * 获取数据字典--区域
         */
        getDictCode() {
            findByDictCode({ dictCode: "areaCode" }).then((res = {}) => {
                if (res.data && res.data.length) {
                    this.areaCode = res.data || [];
                    res.data.map(item => {
                        this.searchConfig[2].data.push({
                            name: item.dictDataName,
                            value: item.dictDataCode,
                            active: false
                        });
                    });
                }
            });
            // findByDictCode({ dictCode: "handleInfo" }).then((res = {}) => {
            //     if (res.data && res.data.length) {
            //         res.data.map(item => {
            //             this.searchConfig[1].data.push({
            //                 name: item.dictDataName,
            //                 value: item.dictDataCode,
            //             });
            //         });
            //     }
            // });
        }
    },
    created() {
        this.getList();
        this.getDictCode();
    }
};
</script>

<style lang = "scss" scoped>
.wrapper {
    margin: 20px;
    background: #fff;
}
.titel-row {
    display: flex;
    align-items: center;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.content {
    padding: 0 20px 80px 20px;
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.table-wrapper {
    position: relative;
    margin-top: 46px;
    .handle-row {
        position: absolute;
        top: -40px;
        right: 0;
        display: flex;
        justify-content: flex-end;
    }
    .handle-btn {
        width: 76px;
        height: 30px;
        border-radius: 3px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            margin-right: 10px;
        }
        &:last-child {
            margin-right: 0;
        }
        &:active {
            opacity: 0.8;
        }
        &.main {
            background: #1a36a9;
            color: #fff;
        }
        &.green {
            background: #007130;
            color: #fff;
        }
        &.default {
            background: #e5e5e5;
        }
        &:disabled {
            background: #999;
            opacity: 1;
        }
    }
}
</style>
<style>
</style>
